<template>
    <el-button 
        :loading="(loading||text=='保存') ? isLoading : false" 
        @click="handleClick"
        :class="['b-button-new', `theme-btn-${text == '取消'?'hollow':hollow?'hollow':'solid'}`, leftIcon ? 'left-icon-type'+iconType : !isWidth ?'btn-type'+buttonType:'wAuto']"
        :style="{width: btnWidth? btnWidth+'px !important':'', height: btnHeight ? btnHeight + 'px !important':''}"
    >   
        <i v-if="leftIcon" :class="['iconfont left-icon', { 'fontTheme': hollow }, leftIcon]"></i>
        {{ text }}
    </el-button>
</template>
<script>

export default {
    data() {
        return {
            isLoading: false,
        }
    },
    props: {
        // 按钮名称
        text: {
            type: String,
            default: ''
        },
        // 是否需要loading 防止二次点击
        loading: {
            type: Boolean,
            default: false
        },
        // 是否空心按钮
        hollow: {
            type: Boolean,
            default: false
        },
        // 左边icon
        leftIcon: {
            type: String,
            default: ''
        },
        // 按钮宽度
        btnWidth: {
            type: [String, Number],
            default: () => ''
        },
        // 是否铺满 100%
        isWidth:{
            type: Boolean,
            default: false
        },
        // 按钮高度
        btnHeight: {
            type: [String, Number],
            default: () => ''
        }
    },
    computed: {
        // 判断字数 添加不同的宽度
        buttonType () {
            let length = this.text.length
            let type = null
            if (length > 0 && length <= 2) {
                type = 1
            } else if (length > 2 && length <= 5) {
                type = 2
            } else if (length > 5 && length <= 8) {
                type = 3
            } else if (length > 8 && length <= 11) {
                type = 4
            } 
            return type
        },
        // 判断字数 添加不同的icon宽度
        iconType() {
            let length = this.text.length
            return length == 4 ? 2 : length == 5? 3: ''
        }
    },
    watch: {
        '$root.buttonLoading': {
            handler (newV, oldV) {
                return this.isLoading = newV
            },
            deep: true
        }
    },
    methods: {
        handleClick() {
            this.$emit('click')
        }
    }
}
</script>
<style lang="scss">
.b-button-new.el-button{
    padding: 0 !important;
    height: 32px !important;
    line-height: 30px !important;
    text-align: center !important;
    font-size: 14px !important;
}
.btn-type1{
    width: 76px !important;
}
.btn-type2{
    width: 94px !important;
}
.btn-type3{
    width: 136px !important;
}
.btn-type4{
    width:202px !important;
}
.left-icon{
    font-size: 12px;
}
.left-icon-type2{
    width: 102px !important;
}
.left-icon-type3{
    width: 116px !important;
}
.wAuto{
    width:100%;
    height: 40px !important;
}
</style>